<template>
  <div class="subview"
       v-if="data.goods_id">
    <div id="goodsrecommend_mescroll"
         class="subcontent mescroll">
      <swiper :options="swiperOption">
        <swiper-slide>
          <img :src="imageData"
               alt=""
               v-imgField>
        </swiper-slide>
        <div class="swiper-pagination"
             slot="pagination"></div>
      </swiper>
      <!-- 商品信息 -->
      <div class="goods-info"
           v-if="data">
        <p class="goods-name"
           :class="{self : data.is_self}">{{ data.goods_name }}</p>
        <p class="goods-summary"
           v-if="data.goods_summary != null">{{ data.goods_summary }}</p>
      </div>

      <div>
        <flexbox>
          <flexbox-item>
            <div class="flex-demo">
              <img src="http://img.zanjl.com/Content/img/image/zengdan.png" alt="">
              <label>
                <u @click="manifestok()">原始货单数量：{{falsereceivenum}}</u>
              </label>&nbsp;
            </div>
          </flexbox-item>
          <flexbox-item>
            <div class="flex-demo">
              <img src="http://img.zanjl.com/Content/img/image/jiefeng.png" alt="">
              <label>解封货单数量：{{truereceivenum}}</label>
            </div>
          </flexbox-item>
        </flexbox>
      </div>
      <div>
        <flexbox>
          <flexbox-item>
            <div class="flex-demo">
              <img src="http://img.zanjl.com/Content/img/image/zengdan1.png" alt="">
              <!-- <label>
                <u @click="manifestok()">奖励货单数量：{{falserewardnum}}</u>
              </label>&nbsp; -->
              <label>奖励货单数量：{{falserewardnum}}</label>&nbsp;
            </div>
          </flexbox-item>
          <flexbox-item>
            <div class="flex-demo">
              <img src="http://img.zanjl.com/Content/img/image/jiefeng.png" alt="">
              <label>解封货单数量：{{truerewardnum}}</label>
            </div>
          </flexbox-item>
        </flexbox>
      </div>
      <div class="btn">
        <button @click="receive()"><label>领取商品</label></button>
        <button @click="$router.push('/p2pinvite')"><label>分享好友</label></button>
      </div>
      <div style="margin-bottom: 0.5rem;">
        <x-table full-bordered :cell-bordered="false" style="background-color:#fff; line-height: 1.5rem;">
          <thead>
            <tr>
              <th colspan="4" style="font-size: 0.35rem; font-weight: 700;">分享人数（{{shareit}}&nbsp;/&nbsp;{{shareitcount}}）</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(parm,index) in shareitdata" :key="index">
              <td class="td">
                <p class="p">
                  <img class="img"
                       :src="parm.head_img || userHead"
                       alt
                       v-imgField>
                </p>
              </td>
              <td style="font-size:0.3rem">{{parm.true_name}}</td>
              <td style="font-size:0.3rem">{{parm.user_name}}</td>
              <td style="font-size:0.3rem">{{parm.reg_time | formatDate}}</td>
            </tr>

          </tbody>
        </x-table>
      </div>
    </div>
  </div>
</template>

<script>
import { Divider, XButton, XTable, Flexbox, FlexboxItem, XDialog } from 'vux'
import goodsCard from '@comps/card/goodsCard'
import { mapMutations, mapState } from 'vuex'
import { SET_LOADING } from '@store/type'
import { getP2PGoodsDetail, getUserRelationship, updateP2PUserPositions, getP2PUserPositions, getuserRelationshipcount, getLoadGoods, p2pReceive, getConsignmentSellerGoods, isConsignmentGoods, getConsignmentGoodsDetail } from '@api'
import { formatDate } from '../../filters/date.js'

export default {
  // 转换时间格式
  filters: {
    formatDate (time) {
      var dtime = time.slice(6, 19)
      var date = new Date(parseInt(dtime))
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  components: {
    Divider,
    XTable,
    Flexbox,
    FlexboxItem,
    XDialog,
    goodsCard,
    XButton,

    isConsignmentGoods,
    getConsignmentSellerGoods,
    getConsignmentGoodsDetail
  },
  data () {
    return {
      userHead: 'http://img.zanjl.com/Content/img/image/user_head.png',
      data: {}, // 商品基础数据
      imageData: '', // 商品相册
      appointData: [],
      recommendGoods: [],
      meScroll: null,
      swiperOption: {
        autoplay: 5000,
        pagination: '.swiper-pagination'
      },
      usertype: 2,
      form: {},
      code: this.$route.query.code,
      sharebox: false,
      showDialogStyle: false,
      falsereceivenum: 0, // 领取单数--未解封
      truereceivenum: 0, // 领取单数--解封
      truerewardnum: 0, // 奖励单数--解封
      falserewardnum: 0, // 奖励单数--未解封
      shareit: 0, // 分享直推人数
      shareitcount: 0, // 分享所有人数
      shareitdata: {} // 直接分享的会员
    }
  },
  computed: {
    ...mapState(['token', 'longitude', 'latitude', 'user'])
  },
  methods: {
    ...mapMutations({
      setLoading: SET_LOADING
    }),
    async manifestok () {
      this.$router.push({
        path: '/manifest',
        query: {
          id: this.$route.params.id,
          userid: this.user.user_id
        }
      })
    },
    // 增单说明 alert
    plusalert () {
      this.$vux.alert.show({
        title: '提示',
        content: '开场前2000人可获赠5个原始货单！推荐5人可解封1个！开场启动后进货5单可解封1单！'
      })
    },
    // 获取分享用户信息
    async selectuserdata () {
      this.setLoading({
        status: true,
        opacity: 0
      })
      let form = new FormData()
      form.append('invite_code', this.user.invite_code)
      form.append('goodsid', this.$route.params.id)
      let res = await getUserRelationship(form)
      this.setLoading(false)
      if (res && res.code === 200) {
        this.shareitdata = res.data
        this.shareit = res.data.length
      }
      let rescount = await getuserRelationshipcount(form)
      if (rescount && rescount.code === 200) {
        this.shareitcount = rescount.data
      }
    },
    // 加载商品基本信息
    async loadGoods () {
      this.setLoading({
        status: true,
        opacity: 0
      })
      let res = await getP2PGoodsDetail(this.$route.params.id)
      this.setLoading(false)
      if (res && res.code === 200) {
        this.data = res.data
        this.imageData = res.data.goods_img
        this.$emit('loadInfo', this.data)
      }
    },
    // 获取用户当前奖励单信息
    async loadReceive () {
      this.setLoading({
        status: true,
        opacity: 0
      })
      let form = new FormData()
      form.append('record_user_id', this.user.user_id)
      form.append('record_goods_id', this.$route.params.id)
      let res = await getLoadGoods(form)
      this.setLoading(false)
      if (res && res.code === 200) {
        console.log(res.data)
        this.falsereceivenum = res.data.falsereceivenum // 领取单数--未解封
        if (res.data.truereceivenum > res.data.falsereceivenum) {
          this.truereceivenum = res.data.falsereceivenum // 领取单数--解封
        } else {
          this.truereceivenum = res.data.truereceivenum // 领取单数--解封
        }
        this.truerewardnum = res.data.truerewardnum // 奖励单数--解封
        this.falserewardnum = res.data.falserewardnum // 奖励单数--未解封
      }

      let formuser = new FormData()
      formuser.append('position_goods_id', this.$route.params.id)
      formuser.append('position_user_id', this.user.user_id)
      // 验证当前用户是否存在持仓信息 如果没有，新建持仓信息
      let p2puserpositions = await getP2PUserPositions(formuser)
      if (p2puserpositions && p2puserpositions.code === 200) {
        if (p2puserpositions.data === null) {
          var countnum = this.truereceivenum + this.truerewardnum
          formuser.append('position_goods_num', countnum)
          formuser.append('Unblock', this.truereceivenum)
          formuser.append('Undeblocked', this.falsereceivenum)
          formuser.append('rewardUnblock', this.truerewardnum)
          formuser.append('rewardUndeblock', this.falserewardnum)
          var upuserposition = await updateP2PUserPositions(formuser)
          if (upuserposition) {

          }
        }
      }
    },
    // 进入交易
    gotoShoppingcart () {
      this.$router.push({
        path: '/p2pgoodstrend',
        query: {
          id: this.$route.params.id
        }
      })
    },
    // 领取奖励单
    async receive () {
      let form = new FormData()
      form.append('record_user_id', this.user.user_id)
      form.append('record_goods_id', this.$route.params.id)
      let res = await p2pReceive(form)
      this.setLoading(false)
      if (res && res.code === 200) {
        this.$vux.alert.show({
          title: '提示',
          content: '您已成功领取！'
        })
      }
    }

  },
  created () {
    this.loadGoods()
    this.loadReceive()
    this.selectuserdata()
    this.usertype = this.user.user_type
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/css/pub";
.position-vertical-demo {
  background-color: #ffe26d;
  color: #333;
  text-align: center;
  padding: .1875rem;
}
.flex-demo {
  text-align: center;
  border-radius: .05rem;
  background-clip: padding-box;
  height: 1rem;
  line-height: 1rem;
  img {
    width: .5rem;
    margin-bottom: -.05rem;
    vertical-align: middle;
  }
  label {
    vertical-align: middle;
  }
}
.swiper-container {
  height: 100vw;
}
.td {
  p {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      vertical-align: middle;
    }
  }
}
.goods-info {
  padding: .25rem;
  background-color: #fff;
  box-shadow: 0 .0125rem .025rem 0 rgba(0, 0, 0, 0.13);

  .goods-name {
    font-size: $default_font_size;
    color: $default_title_color;
    line-height: .5rem;
    i.self {
      font-style: normal;
      margin-right: .125rem;
      padding: .05rem .125rem;
      background-color: $default_theme_color;
      color: #fff;
      font-size: $default_smallfont_size;
    }
  }
  .goods-summary {
    margin-top: .25rem;
    font-size: 0.3rem;
    color: $default_subtitle_color;
    line-height: .5rem;
  }
  .goods-price {
    margin-top: .25rem;
    font-size: .6rem;
    line-height: .75rem;
    height: .75rem;
    em {
      font-size: $default_smallfont_size;
      font-style: normal;
    }
    .price {
      float: left;
      color: $default_price_color;
    }
    .expire {
      float: right;
      color: $default_subtitle_color;
      font-size: $default_middlefont_size;
    }
  }
  .goods-ship {
    width: 100%;
    margin-top: .25rem;
    border-top: .0125rem solid $default_border_color;
    text-align: left;
    padding-top: .25rem;
    display: flex;
    align-items: center;
    .tag {
      font-size: $default_middlefont_size;
      color: $default_subtitle_color;
      margin-right: .25rem;
      i {
        margin-right: .125rem;
      }
    }
  }
}

.seller-card {
  margin-top: .25rem;
}

.recommend {
  margin-top: .25rem;
  .divider {
    margin: .25rem 2.5rem;
  }
  .mescroll {
    height: auto;
    overflow-y: initial;
  }
}

.translate-enter-active,
.translate-leave-active {
  transition: transform 0.5s;
}

.translate-enter,
.translate-leave-to {
  transform: translate(0, 100%);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.btn {
  width: 100%;
  height: 1.25rem;
  bottom: .0625rem;
  text-align: center;
  box-shadow: 0 .0625rem .0875rem 0 rgba(153, 153, 153, 0.15);
  bottom: 0rem;
  button {
    width: 40%;
    height: .775rem;
    background-color: #ffcc00;
    color: #ffffff;
    border-radius: .125rem;
    border: none;
    margin-top: 2%;
    font-weight: 700;
  }
  lable {
    color: #f76d20;
  }
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
